<?php
$memAccount = $this->Session->read('member_account');
?>

<div class="col-xs-6">
    <form class="nav navbar-form navbar-left" action="" method="post">
        <div class="input-group">
            <input type="search" class="form-control input-sm" placeholder="Search for Organisations, People or Events" />
            <span class="input-group-addon"><i class="fa fa-search"></i></span>
        </div>
    </form>
</div>

<ul class="nav navbar-nav navbar-right">

    <li class="hidden-xs">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-bell-o text-white"></i>
            <span class="badge up bg-info m-l-n-sm">0</span>
        </a>
        <section class="dropdown-menu animated fadeInUp input-s-lg">
            <section class="panel bg-white">
                <header class="panel-heading">
                    <strong>You have <span class="count-n">0</span> notifications</strong>
                </header>
                <div class="list-group">
                    <!--<a href="#" class="media list-group-item">
                        <span class="pull-left thumb-sm">
                            <img src="images/avatar.jpg" alt="John said" class="img-circle">
                        </span>
                        <span class="media-body block m-b-none">
                            Use awesome animate.css<br>
                            <small class="text-muted">28 Aug 13</small>
                        </span>
                    </a>
                    <a href="#" class="media list-group-item">
                        <span class="media-body block m-b-none">
                            1.0 initial released<br>
                            <small class="text-muted">27 Aug 13</small>
                        </span>
                    </a>-->
                </div>
                <footer class="panel-footer text-sm">
                    <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                    <a href="#">See all the notifications</a>
                </footer>
            </section>
        </section>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="thumb-sm avatar pull-left m-t-n-xs m-r-xs">
                <?php
                $imgPath = isset($memAccount['Member']['MemberImage'][0]) ? $memAccount['Member']['MemberImage'][0]['thumb_url'] : $this->Html->url('/img/avatar_default.jpg');
                ?>
                <img src="<?php echo $imgPath; ?>">
            </span>
            <?php echo $memAccount['Member']['first_name'] . " " . $memAccount['Member']['last_name']; ?> <b class="caret"></b>
        </a>
        <ul class="dropdown-menu animated fadeInLeft">
            <!--<li>
                <a href="#">Settings</a>
            </li>
            <li>
                <a href="#">
                    <span class="badge bg-danger pull-right">3</span>
                    Notifications
                </a>
            </li>
            <li>
                <a href="<?php echo $this->Html->url('/help'); ?>">Help</a>
            </li>
            <li>
                <a href="<?php echo $this->Html->url(array('action' => 'settings')); ?>" data-toggle="modal" data-target="#chgPass">Settings</a>
            </li>-->
            <li>
                <a href="<?php echo $this->Html->url('/member/change_password'); ?>">Change Password</a>
            </li>
            <li>
                <a href="<?php echo $this->Html->url('/member/logout'); ?>">Logout</a>                
            </li>
        </ul>
    </li>
</ul>

<!-- Modal -->
<div class="modal fade" id="chgPass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Change Password</h4>
            </div>

            <div class="modal-body">
                <div class="spacehead">
                    <h4><?php echo $memAccount['MemberAccount']['username']; ?></h4>
                </div>
                <p class="space">
                <div class="input-group">
                    <span class="input-group-addon">Old Password</span>
                    <input type="text" class="form-control" name="old_pass" id="old_pass">
                </div>
                </p>

                <p class="space">
                <div class="input-group">
                    <span class="input-group-addon">New Password</span>
                    <input type="text" class="form-control" name="new_pwd" name="new_pwd">
                </div>
                </p>
                <p class="space">
                <div class="input-group">
                    <span class="input-group-addon">Re-Type New Password</span>
                    <input type="text" class="form-control">
                </div>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>